<template>
  <div class="sh-wrap">
    <div class="sh-top">
      <span>您的当前位置:</span>
      <a href="#/">首页</a>
      <span>></span>
      <span @click="qbsp()" class="s">全部商品</span>
    </div>
    <div class="sh-yjfl">
      <span>一级分类:</span>
      <a href="#/qbfl" class="active" @click="qb">全部</a>
      <a href="#/qbfl" v-for="(v,i) in flo" :name="v.name" @click="chuan(i,v.name)">{{v.fl}}</a>
    </div>
    <div class="sh-ejly">
      <span>二级分类:</span>
      <a href="#/qbfl" id="ejqb" class="active" name="ejqb">全部</a>
      <a href="#/qbfl" v-for="(v,n) in flt[i]" :name="v.name" @click="ef(v.name,n)">{{v.fl}}</a>
    </div>
    <div class="sh-px">
      <span>排序:</span>
      <a href="###" class="sh-xl">销量</a>
      <a href="###" @click="ddg()">价格从低到高</a>
      <a href="###" @click="gdd()">价格从高到底</a>
      <a href="###">评价最高</a>
    </div>
    <ul class="lk-count-food">
      <li v-for="(v,i) in arr" :id="v._id" @click="tianjia(xin);tz(v._id)"><img :src="v.imgurl"/>

        <div>
          <h4>{{v.name}}</h4>
          <h5></h5>
          <span>{{v.pric}}</span>
          <span>{{v.free}}</span>
          <img src="../assets/lkgwc.png" class="lk-gwc"/>
        </div>
      </li>
    </ul>
{{xin}}
  </div>
</template>

<script>
  var yj = "";
  import store from '@/vuex/store'
  import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'

  export default {
    name: "qbfl",
    data() {
      return {
        i: "",
        arr: [],
        id: "",
        yjfl: '',
        ejfl: "",
        xin:"",
        flo: [{
          fl: "新鲜水果",
          name: "新鲜水果"
        },
          {
            fl: "蔬菜净菜",
            name: "蔬菜净菜"
          },
          {
            fl: "肉类家禽",
            name: "肉类家禽"
          },
          {
            fl: "海鲜水产",
            name: "海鲜水产"
          },
          {
            fl: "粮油副食",
            name: "粮油副食"
          },
          {
            fl: "零食酒水",
            name: "零食酒水"
          },
          {
            fl: "蛋奶素食",
            name: "蛋奶素食"
          },
          {
            fl: "全球代购",
            name: "全球代购"
          },
        ],

        flt: [
          [{
            fl: "时令水果",
            name: "时令水果"
          }, {
            fl: "进口水果",
            name: "进口水果"
          }, {
            fl: "沙拉拼盘",
            name: "沙拉拼盘"
          }, {
            fl: "水果礼盒",
            name: "水果礼盒"
          }],
          [{
            fl: "绿叶菜",
            name: "绿叶菜"
          }, {
            fl: "茄果类",
            name: "茄果类"
          }, {
            fl: "根茎类",
            name: "根茎类"
          }, {
            fl: "菌菇类",
            name: "菌菇类"
          }, {
            fl: "葱姜蒜椒",
            name: "葱姜蒜椒"
          }, {
            fl: "有机蔬菜",
            name: "有机蔬菜"
          }, {
            fl: "蔬菜沙拉",
            name: "蔬菜沙拉"
          }, {
            fl: "蔬菜礼篮",
            name: "蔬菜礼篮"
          }],
          [{
            fl: "牛肉",
            name: "牛肉"
          }, {
            fl: "羊肉",
            name: "羊肉"
          }, {
            fl: "鸡鸭肉",
            name: "鸡鸭肉"
          }, {
            fl: "淡水鱼",
            name: "淡水鱼"
          }],
          [{
            fl: "海鲜礼盒",
            name: "海鲜礼盒"
          }, {
            fl: "生猛海鲜",
            name: "生猛海鲜"
          }, {
            fl: "鱼、虾",
            name: "鱼、虾"
          }, {
            fl: "蟹、贝",
            name: "蟹、贝"
          }],
          [{
            fl: "优选米面",
            name: "优选米面"
          }, {
            fl: "优选杂粮",
            name: "优选杂粮"
          }, {
            fl: "粮油调味",
            name: "粮油调味"
          }, {
            fl: "其他食材",
            name: "其他食材"
          }],
          [{
            fl: "饮料",
            name: "饮料"
          }, {
            fl: "啤酒",
            name: "啤酒 "
          }, {
            fl: "白酒",
            name: "白酒"
          }, {
            fl: "葡萄酒",
            name: "葡萄酒"
          }, {
            fl: "咖啡",
            name: "咖啡"
          }, {
            fl: "茶叶",
            name: "茶叶"
          }, {
            fl: "优选干果",
            name: "优选干果"
          }, {
            fl: "休闲零食",
            name: "休闲零食"
          }],
          [{
            fl: "蛋品",
            name: "蛋品"
          }, {
            fl: "奶制品",
            name: "奶制品"
          }, {
            fl: "烘焙甜点",
            name: "烘焙甜点"
          }, {
            fl: "方便速食",
            name: "方便速食"
          }],
          [{
            fl: "奶粉辅食",
            name: "奶粉辅食"
          }, {
            fl: "幼婴用品",
            name: "幼婴用品"
          }, {
            fl: "日化用品",
            name: "日化用品"
          }, {
            fl: "保健品",
            name: "保健品"
          }]
        ]
      }
    },
    mounted() {
      var _this = this;
      $(function () {
        $(".sh-yjfl>a").click(function () {
          $(".sh-yjfl>a").removeClass('active');
          $(this).addClass('active');
        });
        $(".sh-px>a").click(function () {
          $(".sh-px>a").removeClass('sh-xl');
          $(this).addClass('sh-xl');
        });
        $.ajax({
          type: "get",
          url: "http://localhost:8088/getthing",
          async: true,
          data: {
            act: 'qb'
          },
          dataType: 'json',
          success(data) {
            _this.arr = data;
          }
        });
        $(".sh-yjfl>a:gt(0)").click(function () {
          var id = $(this).attr('name');
          //					console.log(id);
          yj = id;
          $.ajax({
            type: "get",
            url: "http://localhost:8088/getthing",
            async: true,
            data: {
              act: 'find',
              id: id
            },
            dataType: 'json',
            success(data) {
              console.log(data)
              _this.arr = data;
            }
          });
        });

      })

    },
    methods: {
      ...mapActions(['tianjia']),
      ef(id, i) {
        var id = id
        this.ejfl = id;
        var _this = this;
        $.ajax({
          type: "get",
          url: "http://localhost:8088/getthing",
          async: true,
          data: {
            act: 'ejfind',
            ejid: _this.ejfl,
            yjid: yj,
          },
          dataType: 'json',
          success(data) {
            console.log(data)
            _this.arr = data;
          }
        });
      },
      qb() {
        var _this = this;
        $.ajax({
          url: "http://localhost:8088/getthing",
          data: {
            act: 'qb',
          },
          async: true,
          success(data) {
            //						console.log(data)
            _this.arr = data;
          }
        });
      },
      xxsg() {
        $.ajax({
          url: "http://localhost:8088/getthing",
          data: {
            act: 'find',
          },
          async: true
        });
      },
      qbsp() {
        $.ajax({
          url: "http://localhost:8088/getthing",
          data: {
            act: 'qb',
          },
          async: true
        });
        window.location.href = 'http://localhost:8080/#/qbfl'
      },
      chuan(index) {
        this.i = index;
        $('.sh-ejly').css('display', 'block')
      },
      tz(id) {
        var _this = this;
        $.ajax({
          url: "http://localhost:8088/getthing",
          data: {
            act: 'findid',
            id: id,
          },
          async: true,
          success(data) {

            _this.tianjia(data[0])
          }
        });
        window.location.href = "http://localhost:8080/#/spxq";
      }
    },store
  }
</script>

<style scoped>
  .lk-gwc {
    width: 34px;
    height: 30px;
    position: absolute;
    bottom: 12px;
    right: 18px;
    cursor: pointer;
    vertical-align: middle;
    z-index: 999;
  }

  .lk-count-food > li > img {
    height: 305px;
    width: 100%;
    vertical-align: middle;
  }

  .lk-count-food {
    overflow: hidden;
  }

  .lk-count-food > li:nth-child(4n+1) {
    margin-left: 0;
  }

  .lk-count-food > li {
    float: left;
    margin: 20px 0 20px 20px;
    width: 303px;
    height: 436px;
    border: solid 1px #ECECEC;
    position: relative;
    cursor: pointer;
  }

  .lk-count-food > li > div {
    padding: 10px 30px;
  }

  .lk-count-food > li > div > h4 {
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    font-family: inherit;
  }

  .lk-count-food > li > div > h5 {
    color: #666666;
    height: 15px;
    overflow: hidden;
    line-height: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .lk-count-food div > span:nth-child(3) {
    font-size: 20px;
    color: #FF5757;
    font-weight: 500;
  }

  .lk-count-food div > span:nth-child(4) {
    margin-left: 5px;
    font-size: 16px;
    color: #666666;
    text-decoration: line-through;
    font-weight: 500;
  }

  .s {
    cursor: pointer;
  }

  .sh-wrap {
    width: 1280px;
    margin: auto;
  }

  .sh-top {
    width: 1260px;
    height: 55px;
    padding-left: 20px;
    line-height: 55px;
    background-color: #f4f4f4;
    font-size: 15px;
    color: rgb(50, 50, 50);
    margin: 20px 0;
  }

  .sh-top a {
    margin-left: 15px;
  }

  .sh-top span {
    margin-left: 5px;
  }

  .sh-yjfl,
  .sh-ejly {
    border-bottom: solid 1px #ddd;
  }

  .sh-ejly {
    display: none;
  }

  .sh-yjfl > span,
  .sh-ejly > span {
    line-height: 55px;
    color: #666;
    font-size: 14px;
  }

  .sh-yjfl > a,
  .sh-ejly > a {
    padding: 5px 10px;
    margin: 0 5px;
  }

  .active {
    font-weight: 600;
    color: white;
    background-color: forestgreen;
  }

  .sh-yjfl > a:hover,
  .sh-ejly > a:hover {
    font-weight: 600;
    color: white;
    background-color: forestgreen;
  }

  .sh-px span {
    line-height: 55px;
    color: #666;
  }

  .sh-px a {
    padding: 5px 10px;
    margin: 0 10px;
    text-decoration: none;
    border: 1px solid gainsboro;
  }

  .sh-px a:hover {
    border: solid 1px #4B943D;
    color: #4B943D;
  }

  .sh-px .sh-xl {
    border: solid 1px #4B943D;
    color: #4B943D;
  }
</style>
